<template>
  <footer>
    <div>
      <input type="checkbox" />全选
      <span>{{ doneLength }} / {{ data.length }}</span>
    </div>
    <div>
      <a href="javascript:;">删除选中</a>
    </div>
  </footer>
</template>

<script lang="ts">
import { computed } from "vue";

export default {
  name: "TodoFooter",
  props: ["data"],
  setup(props) {
    // console.log(props);
    // 通过计算属性来获取已经完成的todo
    const doneLength = computed(() => {
      return props.data.filter((item) => item.done).length;
    });
    return {
      doneLength,
    };
  },
};
</script>

<style scoped>
footer {
  display: flex;
  justify-content: space-between;
}
</style>
